<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">订单管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :gutter="25">
          <el-col :span="10">
            <el-input placeholder="请输入内容" @clear="getOrdersList()" @blur="getOrdersList()" :clearable="true"
              v-model="queryInfo.query" class="input-with-select">
              <el-button @click="getOrdersList()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <!-- 表格区 -->

      <el-table :data="ordersList" border stripe style="width: 100%">
        <el-table-column fixed type="index" label="#"></el-table-column>
        <el-table-column prop="order_id" label="订单ID" width="80"></el-table-column>
        <el-table-column prop="user_id" label="用户ID" width="80"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="220"></el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="100"></el-table-column>
        <el-table-column prop="order_pay" label="支付方式" width="100"></el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_send === '1'" type="primary">已发货</el-tag>
            <el-tag v-else type="warning">未发货</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status === '1'" type="primary">已付款</el-tag>
            <el-tag v-else type="warning">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="120">
          <template slot-scope="scope">
            {{scope.row.create_time | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="update_time" label="更新时间" width="120">
          <template slot-scope="scope">
            {{scope.row.update_time | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="addressDialogVisible = true" type="primary" size="mini" class="iconfont icon-iconfontshuru">地址
            </el-button>
            <el-button type="danger" size="mini" class="iconfont icon-iconfontgongjiao" @click="showProgress">
              物流
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 3, 4, 5, 10, 20, 50, 100, 200, 300, 400]"
        :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </el-card>
    <!-- 修改地址 -->
    <el-dialog v-drag title="修改地址" :visible.sync="addressDialogVisible" @close="addressDialogClosed" width="50%">
      <el-form ref="editAddressRef" :model="addressForm" label-width="80px" :rules="addressFormRules">
        <el-form-item label="省市区/县">
          <!-- <el-input v-model="addressForm.address1" ></el-input> -->
          <el-cascader
              v-model="addressForm.address1"
              :options="cityData"
              :props="{ expandTrigger: 'hover' }"
              @change="handleAddressChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="addressForm.address2"></el-input>
        </el-form-item>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addressDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editAddress">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!-- 展示物流 -->
    <el-dialog v-drag title="物流进度" :visible.sync="logisticsDialogVisible" @close="logisticsDialogClosed" width="50%">
      <el-form ref="logisticsRef" :model="logisticsForm" label-width="80px" >
        <el-form-item label="省市区/县">
            <el-timeline >
              <el-timeline-item
                v-for="(activity, index) in logisticsList"
                :key="index"
                :timestamp="activity.time">
                {{activity.context}}
              </el-timeline-item>
            </el-timeline>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        queryInfo: {
          query: '',
          pagenum: 1,
          pagesize: 10
        },
        ordersList: [],
        total: 0,
        //修改------------
        addressDialogVisible: false,
        addressForm: {
          address1: [],
          address2: ''
        },
        addressFormRules: {
          address1: [{
            required: true,
            message: '请输入省市区/县',
            trigger: 'blur'
          }],
          address2: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }, {
            min: 3,
            max: 225,
            message: '长度在 3 到 225 个字符',
            trigger: 'blur'
          }],
        },
        cityData: this.$cityData,
        ordersInfo: {},
        logisticsDialogVisible: false,
        logisticsForm:{},
        logisticsList: []
      }
    },
    created() {
      this.getOrdersList();
    },
    methods: {
      //获取订单
      async getOrdersList() {
        const {
          data: res
        } = await this.$http.get('orders', {
          params: this.queryInfo
        });
        if (res.meta.status !== 200) return this.$msg.error('获取订单失败!');
        this.ordersList = res.data.goods;
        this.total = res.data.total;
      },
      //下拉选择页数
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize;
        this.getOrdersList();
      },
      //分页
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage;
        this.getOrdersList();
      },
      addressDialogClosed() {
        this.$refs.editAddressRef.resetFields();
      },
      editAddress() {
        this.$refs.editAddressRef.validate(async valid => {
          if (valid) {
            this.editDialogVisible = false;
            const {
              data: res
            } = await this.$http.put('orders/' + this.editOrdersForm.id, this.editOrdersForm);
            if (res.meta.status !== 200) {
              return this.$msg.error('修改失败！');
            }
            this.$msg.success('修改成功！');
            this.editDialogVisible = false;
            this.getOrdersList();
          }
        });
      },
      handleAddressChange(){

      },
      //显示物流
      async showProgress(){
        const id = 'JT5100034924431'
        const {
          data: res
        } = await this.$http.get(`/kuaidi/${id}`);
        if (res.meta.status !== 200) {
          return this.$msg.error('获取失败！');
        }
        this.logisticsList = res.data
        this.logisticsDialogVisible = true
      },
      logisticsDialogClosed(){
        this.$refs.logisticsRef.resetFields()
      },
      editLogistics(){

      }

    }
  };
</script>
<style lang="less" scoped>

</style>
